<script setup lang="ts">
import { ref, defineProps, defineEmits, watch } from 'vue'
import QIcon from '@/components/q-icon/q-icon.vue'
import { QrcodeStream } from 'qrcode-reader-vue3'

const $props = defineProps({
    modelValue: {
        type: Boolean,
        default: true,
    },
})
const $emit = defineEmits(['update:modelValue', 'analysisResult'])
const torchType = ref(false)
const scanLoad = ref(false)
const camera = ref('rear')
watch($props, (newVal) => {
    if (newVal.modelValue) {
        camera.value = 'rear'
    } else {
        camera.value = 'off'
        scanLoad.value = false
    }
})

/**
 * 解析结果回调
 * @param {any} result
 */
const handleDecode = (result: any) => {
    $emit('analysisResult', result)
}
/**
 * 打开手电筒
 */
const handleShowTorch = () => {
    torchType.value = !torchType.value
}
function handleCloseScan() {
    camera.value = 'off'
    scanLoad.value = false
    $emit('update:modelValue', false)
}
async function initScan(promise: any) {
    try {
        uni.showLoading({
            title: '摄像头准备中',
        })
        await promise
        scanLoad.value = true
    } catch (error: any) {
        handleCloseScan()
        if (error.name === 'NotAllowedError') {
            uni.showToast({
                icon: 'none',
                title: '请打开浏览器摄像头权限',
                duration: 2000,
            })
        } else if (error.name === 'NotFoundError') {
            uni.showToast({
                icon: 'none',
                title: '本地未发现摄像头设备',
                duration: 2000,
            })
        } else if (error.name === 'NotSupportedError') {
            uni.showToast({
                icon: 'none',
                title: '只支持HTTPS访问',
                duration: 2000,
            })
        } else if (error.name === 'NotReadableError') {
            uni.showToast({
                icon: 'none',
                title: '摄像头使用中，请勿重复操作',
                duration: 2000,
            })
        } else if (error.name === 'OverconstrainedError') {
            uni.showToast({
                icon: 'none',
                title: '本地未发现前置摄像头',
                duration: 2000,
            })
        } else if (error.name === 'StreamApiNotSupportedError') {
            uni.showToast({
                icon: 'none',
                title: '浏览器版本过低,请升级后使用',
                duration: 2000,
            })
        }
    } finally {
        uni.hideLoading()
    }
}
</script>
<template>
    <view v-if="$props.modelValue" class="scan">
        <QrcodeStream :torch="torchType" :camera="camera" @decode="handleDecode" @init="initScan" />
        <view v-show="scanLoad" class="scan__back" @click="handleCloseScan">
            <q-icon name="icon-xiajiantou" color="#6c6968" size="20px" />
        </view>
        <view v-show="scanLoad" class="scan__tool">
            <!-- 手电筒 -->
            <!-- <view class="scan__tool--item" @click="handleShowTorch">
                <q-icon name="icon-ziyuan170" color="#fff" size="18px" />
            </view> -->
            <!-- 图片解析 -->
            <!-- <view class="scan__tool--item">
                <q-icon name="icon-tupian1" color="#fff" size="18px" />
            </view> -->
        </view>
    </view>
</template>

<style lang="scss" scoped>
@include b(scan) {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    @include e(tool) {
        width: 100%;
        padding: 0 40rpx;
        position: absolute;
        bottom: 140rpx;
        @include flex(flex-end);
        @include m(item) {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            background: #6c6968;
            @include flex;
        }
    }
    @include e(back) {
        position: absolute;
        top: 60px;
        left: 20px;
        width: 50rpx;
        height: 50rpx;
        border-radius: 50%;
        background: #fff;
        @include flex;
        transform: rotate(90deg);
    }
}
</style>
